<script lang="ts" setup>

import {Upload} from "@element-plus/icons-vue";
import {getCategoryPage, upCategory, saveCategory, deleteCategory} from '@/api/admin'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const tableData = ref([])

const getPageBookCategoriesData = ref({
  pageNumber: "1",
  pageSize: "10",
  categoryName: ""
})

const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(10)

// 获取图书列表
const getCategory = async () => {
  const response = await getCategoryPage(getPageBookCategoriesData.value)
  tableData.value = response.data.results
  total.value = response.data.total
};

onMounted(() => {
  getCategory()
})

// 每页条数发生变化
const handleSizeChange = (val: number) => {
  getPageBookCategoriesData.value.pageSize = val
  getCategory()
  console.log(`${val} items per page`)
}

// 当前页码发生变化
const handleCurrentChange = (val: number) => {
  getPageBookCategoriesData.value.pageNumber = val
  getCategory()
  console.log(`current page: ${val}`)
}

// 提交搜索
const onSubmit = () => {
  getCategory()
}

// 清空输入框
const onSubmitEmpty = () => {
  getPageBookCategoriesData.value.categoryName = ''
  getCategory()
}

const upCategoriesDialogVisible = ref(false)

//编辑分类
const categoryDTO = ref({
  categoryId: '',
  categoryName: ''
})

const inputCategoryName = ref('')

const upDataCategoriesButton = (data) => {
  upCategoriesDialogVisible.value = true
  categoryDTO.value.categoryId = data.categoryId
  categoryDTO.value.categoryName = data.categoryName
}

//分类修改接口调用
const upCategoryButton = async () => {
  categoryDTO.value.categoryName = inputCategoryName.value
  await upCategory(categoryDTO.value)
  getCategory()
  upCategoriesDialogVisible.value = false
  ElMessage.success("分类修改成功")
}

//新增分类
const saveCategoriesDTO = ref({
  categoryId: '',
  categoryName: ''
})
const saveCategoriesDialogVisible = ref(false)
const inputSaveCategoryName = ref('')

const saveCategoryButton = async () => {
  saveCategoriesDTO.value.categoryName = inputSaveCategoryName.value
  console.log(saveCategoriesDTO.value.categoryName)
  await saveCategory(saveCategoriesDTO.value)
  getCategory()
  saveCategoriesDialogVisible.value = false
  ElMessage.success("分类新增成功")
  saveCategoriesDTO.value.categoryName = ''
}

//删除分类
const deleteCategoryDTO = ref({
  categoryId: ''
})

const deleteDialogVisible = ref(false)

const deleteCategoryButton = (data) => {
  deleteCategoryDTO.value.categoryId = data.categoryId
  categoryDTO.value.categoryName = data.categoryName
  deleteDialogVisible.value = true
}

const delCategory = async () => {
  await deleteCategory(deleteCategoryDTO.value)
  getCategory()
  ElMessage.success("删除成功")
  deleteDialogVisible.value = false
  categoryDTO.value.categoryName = ''
}

</script>

<template>
  <!-- 分类列表 -->
  <el-card>
    <div class="card-header">
      <span>分类管理</span>
      <el-button type="primary" @click="saveCategoriesDialogVisible = true">
        新增分类
        <el-icon class="el-icon--right">
          <Upload/>
        </el-icon>
      </el-button>
    </div>
    <el-divider/>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="getPageBookCategoriesData.categoryName" style="width: 240px" placeholder="请输入分类名"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitEmpty">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="categoryId" label="分类ID"/>
      <el-table-column prop="categoryName" label="分类名称"/>
      <el-table-column prop="createdAt" label="操作" width="180">
        <template #default="{row}">
          <div>
            <el-button type="primary" plain @click.stop="upDataCategoriesButton(row)">编辑</el-button>
            <el-button type="danger" plain @click.stop="deleteCategoryButton(row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
          class="el-p"
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 15, 20, 25]"
          layout="jumper, total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!-- 分类修改对话框 -->
  <el-dialog
      v-model="upCategoriesDialogVisible"
      :title="'修改分类：' + categoryDTO.categoryName"
      width="500"
  >
    <el-input v-model="inputCategoryName" style="width: 240px" placeholder="请输入新的分类名称"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="upCategoriesDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="upCategoryButton">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增分类 -->
  <el-dialog
      v-model="saveCategoriesDialogVisible"
      title="新增分类"
      width="500"
  >
    <el-input v-model="inputSaveCategoryName" style="width: 240px" placeholder="请输入新的分类名称"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="saveCategoriesDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveCategoryButton">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 删除分类 -->
  <el-dialog
      v-model="deleteDialogVisible"
      :title="'您确认要删除分类：' + categoryDTO.categoryName"
      width="500"
  >
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="delCategory">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.el-p {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.card-header {
  display: flex;
  justify-content: space-between;
}

.image-container {
  display: flex;
  justify-content: center;
  margin-bottom: 10px; /* 可根据需要调整 */
}
</style>